<template>
	<view class="introduction" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<view class="navigation-title" v-if="titleShow">攻略</view>
			<image src="/static/images/back-left-white.png" class="back" @click="back()" mode=""></image>
		</view>
		<view class="navigation-position"></view>
		<view class="introduction-content">
			<image src="/static/images/introduction/header-fsm.png" mode="widthFix"></image>
			<image src="/static/images/introduction/introduction1-fsm.png" mode="widthFix"></image>
			<image src="/static/images/introduction/introduction2-fsm.png" mode="widthFix"></image>
			<image src="/static/images/introduction/introduction6-fsm.png" mode="widthFix"></image>
			<image src="/static/images/introduction/introduction8-fsm.png" mode="widthFix"></image>
			<image src="/static/images/introduction/introduction4-fsm.png" mode="widthFix"></image>
			<image src="/static/images/introduction/introduction5-fsm.png" mode="widthFix"></image>
			<image src="/static/images/introduction/introduction7-fsm.png" mode="widthFix"></image>
			
		</view>
	</view>
</template>

<script>
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		store,
		computed:{
			...mapGetters([
				'statusBar'
			])
		},
		data(){
			return {
				titleShow:false
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 42) {
				this.titleShow = true
			} else {
				this.titleShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #FF002A;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #FF002A;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #ffffff;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background:#FF002A;
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.introduction-content{
		>image{
			display: block;
			width: 100%;
			
		}
	}
</style>